<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="TingGe Blog Agile agile JavaScript NodeJS">
  <meta name="author" content="TingGe<505253293@163.com>">
  <title>听歌实验室</title>
  <link type="image/x-icon" rel="shortcut icon" href="https://avatars3.githubusercontent.com/u/4074517?v=3&s=40" />
  <link rel="stylesheet" type="text/css" href="/lib/bootstrap/dist/css/bootstrap.min.css" media="screen">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
  <link href="/css/landing-page.css" rel="stylesheet">
  <link href="/css/screenshots.css" rel="stylesheet">
  <style media="screen">
    #main {
      padding-top: 55px;
    }
  </style>
  <script type="text/javascript" src="/lib/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="/lib/html2canvas/dist/html2canvas.min.js"></script>
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
    <div class="container topnav">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand topnav" href="/">
          <i class="fa fa-flask icon-3x" aria-hidden="true"></i> 听歌实验室
        </a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="/html/js.html">JavaScript/NodeJS</a>
          </li>
          <li>
            <a href="/index.html#agile">敏捷/项目管理(Agile/PMP)</a>
          </li>
          <li>
            <a href="/html/cloud-bi.html">云商业智能(Cloud BI)</a>
          </li>
          <li>
            <a href="/html/iot.html">物联网(WoT/IoT)</a>
          </li>
          <li>
            <a href="/html/me.html">关于我</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>
  <div id="main" class="container">
    <div class="row">
      <div id="article" class="col-md-9 content-container">
        <h1 id="web-">Web 性能</h1>
<blockquote>
<p>从工程的角度来讲，过度优化有时会造成很高昂的代价. 所以，一个好的工程师，不仅仅知道该怎么优化，更重要的是知道这里该不该优化。——摘自《<a href="https://segmentfault.com/a/1190000005873431">切图崽的自我修养－提高项目加载速度</a>》</p>
</blockquote>
<h2 id="-latency-thoughput-">响应时间（latency ）与吞吐量（Thoughput）关系</h2>
<p><img src="../img/BenchmarkOptimalRate.png" alt=""></p>
<p>说明，建议采用中位数（Mean）评估系统的响应时间（latency）。</p>
<h2 id="-">措施</h2>
<ol>
<li>首屏所需要的 JS 与 CSS ，编译内联至 HTML 中</li>
<li>对引入的资源排定优先次序</li>
<li>应用JS缓存来存储。写入 local 的时候，同时在 Cookie 中种下当前所有要缓存内容的版本( MD5 戳)就行。 因为 cookie 是会在同步访问的时候，传送到服务端的，而 local 不会，所以，我们在服务端决定要传送内容，还是传送读取 local 代码。就靠我们种下的 cookie 了</li>
<li>DOM缓存（模板和数据）</li>
<li>外链。将所有的JS/CSS等静态文件，通过一个接口全部返回。达到合并外链请求的目的，我们又将这静态文件，也一一缓存到localstorage中。每个文件以自己文件内容生成的版本号为戳，标识自己的唯一性。每次服务端返回页面时，会把当前在服务器上的所有静态文件版本号，返给前端。前端首屏加载完成后，会用这些版本号与local中进行一一对比，发现不一致的 JS/CSS ，会一起发送一个合并请求。这样可以保证每个文件的缓存与版本迭代。同时，也避免了过多的外链。</li>
<li>使用 iconfont</li>
<li>不在首屏的就要异步化按需加载</li>
<li>少量静态文件的域名</li>
<li>对于小于1k的图片，我们将其变为Base64编码，并融入到CSS中，一起缓存到localstorage中</li>
<li>AJAX接口最优调用</li>
<li>DNS 预解析（）</li>
<li>减少HTTP重定向</li>
<li>使用CDN（内容分发网络）</li>
<li>传输压缩过的内容（Gzip压缩）</li>
<li>去掉不必要的资源</li>
<li>在客户端缓存资源</li>
<li>无状态域名</li>
<li>并行处理请求和响应</li>
<li>拼合和连接</li>
<li>服务端写相关信息到 header</li>
<li>域名分区。页面中非常多请求都是一个域名下资源时，由于浏览器同时只能打开6个连接池，而且每个链接池是对不同域名起作用，所以很多请求一个域名会出现排队现象。如果把这些请求域名分区，让请求并行，从而加快资源下载。</li>
</ol>
<h3 id="-web-">对于 web 前端</h3>
<p>HTTP1.1 时代，我们针对这个协议的特性做了很多 WEB 前端优化，比如说 域名分片、文件合并压缩、雪碧图、行内代码等。但是到了 HTTP/2 时代，这些操作都是多余的了，对于同一个域名，只会建立起一个 TCP 连接。太多的域名还会增加新建连接的初始化和 TLS 握手的时间。</p>
<p>在采用 HTTP/2 之前，需要找出应用了这些优化的代码，分析一下它们会不会影响你的应用设计和工作流程。这样在迁移到 HTTP/2 之后，就可以着手改造它们，甚至撤销某些优化</p>
<h3 id="https-">HTTPS 的压力</h3>
<p>HTTPS 正式启用之前还有很多问题要解决。</p>
<ol>
<li>单连接开销比较大。HPACK 数据压缩算法会更新两端的查找表。这样可以让连接有状态，而破坏状态就意味着要重建查找表，另外单连接占用内存较多</li>
<li>全站点 HTTPS 的改造。可能涉及到 web，CDN，native 客户端。</li>
</ol>
<h3 id="-">其他问题</h3>
<ol>
<li>需要抛弃针对 HTTP/1.x 的优化。</li>
<li>对下载大文件不利。</li>
<li>你的客户也许不在乎。你的客户很可能不在乎他分享的自家猫咪的视频是否受到 TLS 和 HTTP/2 的保护。</li>
</ol>
<h2 id="-">参考</h2>
<ol>
<li><a href="http://bubkoo.com/2015/11/19/prefetching-preloading-prebrowsing/">前端性能优化 - 资源预加载</a>：<code>DNS-prefetch</code>、<code>subresource</code> 和标准的 <code>prefetch</code>、<code>preconnect</code>、<code>prerender</code></li>
<li><p><a href="http://coolshell.cn/articles/17381.html">性能测试应该怎么做？</a></p>
</li>
<li><p><a href="https://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&amp;mid=2247483922&amp;idx=1&amp;sn=0f887e42a4edaf05fa5ca73ea9c792b1">京东前端：三级列表页持续架构优化</a></p>
</li>
<li><a href="https://segmentfault.com/a/1190000005904337">切图崽的自我修养－优化图片加载流程</a></li>
<li><a href="http://dubbo.io/User+Guide-zh.htm">Dubbo 用户指南</a></li>
<li><a href="https://segmentfault.com/blog/frontenddriver">前端小站[聊一聊系列]</a></li>
<li><a href="http://mp.weixin.qq.com/s?__biz=MzAwNjY4NTQ4MA==&amp;mid=2651174290&amp;idx=1&amp;sn=288518f030801f4d90878e806546487c">性能不好怎么办？对着清单撸一遍</a></li>
<li><a href="http://ourjs.com/detail/53410e63b189a25b71000001">极快的node.js：来自领英（LinkedIn）移动的10个性能技巧</a></li>
<li><a href="http://www.oschina.net/translate/optimising-nginx-node-js-and-networking-for-heavy-workloads">为高负载网络优化 Nginx 和 Node.js</a></li>
<li><a href="https://segmentfault.com/a/1190000007637735">未来已到——HTTP/2</a></li>
</ol>

      </div>
      <div class="col-md-3" style="padding-top:20px;">
        <iframe src="http://githubbadge.appspot.com/tingge?a=0" style="border: 0;height: 142px;width: 200px;overflow: hidden;" frameBorder="0"></iframe>
      </div>
    </div>
  </div>
  <a id="html2canvas" title="截图下载-快照">&nbsp;</a>
  <script src="/lib/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="/js/article.js" charset="utf-8"></script>
  <!-- justice.js https://github.com/okor/justice  -->
  <script src="/lib/justice.min.js" charset="utf-8"></script>
  <!-- instantclick -->
  <script src="/lib/instantclick.js" charset="utf-8"></script>
  <script type="text/javascript" data-no-instant>
    Justice.init();
  </script>
</body>

</html>
